<template>
    <div class="father">
        <!-- <input type="text" v-model="msg"> -->
        <!-- 源代码:value="msg"后台数据修改影响前台界面，@input前台界面的数据影响后台-->
        <!-- <input type="text" :value="msg" @input="msg = (<HTMLInputElement>$event.target).value"> -->
        {{msg}}-{{study}} <br> 
        <!-- <LxyInput v-model="msg"/>     -->
        <LxyInput v-model:lxy="msg" v-model:lxyStudy="study"/>    
        <!-- 源代码 -->
        <!-- @update:modelValue事件名  -->
        <!-- <LxyInput 
        :modelValue="msg" 父传子
        @update:modelValue="msg = $event" 子传父
        /> -->
<br>
        总结：$event
        对于原生事件， $event事件对象，可以.target
        对于自定义事件，$event触发事件，传递数据，不可以.target
    </div>
</template>
<script setup   lang="ts">
import {ref} from 'vue'
import LxyInput from './LxyInput.vue'

let msg = ref('lxy68');
let study = ref('cost time to study');

</script>
<style scoped>
.father{
    width: 100vw;
    background-color: rgb(209, 206, 25);
}
</style>
